<template>
    <div :class='{"btn":isLeft!="Y","btnL":isLeft=="Y"}'>
        <el-row>
            
            <div class='button_item' v-for="(item,index) in buttonJson" :key="index" :style="{'backgroundColor':item.backgroundColor}">
                <el-button type="text" class="btns"  @click="buttonClick($event,item)" v-if="item.child.length==0" style='padding-right:5px;padding-left:5px;'>
                    <i :class="item.wb_buttonicon"></i>
                    {{item.buttonName}}
                </el-button>
                <el-dropdown v-else @command="handleClick">
                    <el-button type="text" class='btns' style='padding-right:10px;padding-left:10px;'>
                       {{item.buttonName}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item :command="itemc"  v-for="(itemc,index2) in item.child"   :key="index2">{{itemc.buttonName}}</el-dropdown-item>
                      
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            

          
        </el-row>
    </div>
</template>
<script>
export default { 
    props:['buttonJson','isLeft'],
    name: "buttonBar",
    data(){
        return{

        }
    },
    created(){
    },
    methods:{
        buttonClick(event,item){
            let ip=localStorage.getItem("ip");
            
            //item.url=item.url.replace("ip/",ip);
            this.$emit("btn-click",JSON.stringify(item));
        },
        handleClick(command){
            this.$emit("btn-click",JSON.stringify(command));
           
        }
    }
}
</script>
<style  scoped>
    .btn{
        padding:5px 5px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        float:right;
    }
    .btnL{
        padding:5px 5px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    .button_item{
        display:inline-block;
        margin-left:5px;
        /*background:#f0f4fa;*/
        background:#409eff;
        border-radius: 5px;
        
    }
    .el-button{
        padding:10px 12px;
    }
    .btns{
        border-radius: 5px;
        /*color:#95a6b7;*/
        color:#fff;
        font-size:12px;
    }
    .btns:hover{
        background:#409eff;
        color:#fff; 
    }
</style>